<template>
	<view class="flex flex-col h-screen">
		<NavBarVue title="选择数字"></NavBarVue>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full">
				<view class="p-30">
					<view class="flex flex-wrap bg-white rounded-md p-20">
						<view
							class="item-num flex justify-center items-center mb-20 rounded-md bg-[#C8E5FF] text-md w-72 h-72 text-[#329EFF] border border-solid border-[#C8E5FF]"
							:class="[chooseArr.indexOf(item)>-1?'active text-white':'']" @click="handleChoose(item)"
							v-for="(item, idx) in 78" :key="idx">{{item}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="flex items-center p-30">
			<view class="flex-1 p-20 bg-[#329EFF] text-center rounded-full text-md text-white mr-30" @click="handleSubmit">确定
			</view>
		</view>
		<uni-popup ref="popupRef" type="dialog">
			<uni-popup-dialog type="info" cancelText="我想重新选择" confirmText="我选好了" title="您所选择的数字为:" :content="content"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	const num = ref(0);
	const chooseArr = ref([]);
	const popupRef = ref(null)

	const content = computed(() => {
		return chooseArr.value.join(' ')
	})

	onLoad((option) => {
		num.value = Number(option.num);
	})

	const dialogConfirm = () => {
		popupRef.value.close()
		uni.$emit('chooseNum', chooseArr.value)
		uni.navigateBack({
			delta: 1
		})
	}

	const dialogClose = () => {
		popupRef.value.close()
		chooseArr.value = []
	}
	const handleChoose = (item) => {
		if (chooseArr.value.length == num.value) {
			return
		}
		const idx = chooseArr.value.indexOf(item)
		if (idx > -1) {
			chooseArr.value.splice(idx, 1)
		} else {
			chooseArr.value.push(item)
		}
	}
	const handleSubmit = () => {
		if (chooseArr.value.length != num.value) {
			uni.showToast({
				icon: "none",
				title: `请选择${num.value}个数字！`
			})
			return
		}
		popupRef.value.open()
	}
</script>

<style lang="scss" scoped>
	.item-num {
		margin-right: 42rpx;

		&.active {
			background: url(/static/uni.png) no-repeat;
			background-size: cover;
		}

		&:nth-child(6n) {
			margin-right: 0;
		}
	}
</style>